- 综合排序
- 最热优先
- 最新优先
- 来自专栏无所事事者爱嘲笑
webpack常用loader和plugin及打包速度优化
优化 或 也可以用： 备用： 慎用的配置，用的不好会增加打包时间： 代码丑化插件：
38340发布于 2018-06-20 - 来自专栏全栈程序员必看
plugins webpack_webpack plugin原理
plugin 插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！ 插件目的在于解决 loader 无法实现的其他事。 常用的插件 由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例，接下来我们介绍几个常用的插件 BannerPlugin 将横幅添加到每个生成的块的顶部 一般用于添加版权声明 const webpack = require('webpack'); // 访问内置的插件 const path = require('path'); module.exports 使用插件前我们需要安装插件，命令如下： npm install --save-dev html-webpack-plugin 安装完成以后，我们需要在webpack中引用它，并对其进行配置 const '); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入插件 module.exports = { entry: '
64830编辑于 2022-09-21 - 来自专栏前端LeBron
Webpack Plugin知识分享
认识Plugin Loader是用于特定的模块类型进行转换; Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等; 常用Plugin CleanWebpackPlugin 每次修改了一些配置 ，重新打包时，都需要手动删除dist文件夹: 我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin; 安装： npm install clean-webpack-plugin --save 配置： const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { entry 在进行项目部署的时，必然也是需要有对应的入口文件index.html; 所以我们也需要对index.html进行打包处理; 安装 npm install html-webpack-plugin --save 默认情况下是根据ejs的一个模板来生成的; 在html-webpack-plugin的源码中，有一个default_index.ejs模块; DefinePlugin 用于定义全局常量 安装 Webpack
61220编辑于 2021-12-08 - 来自专栏腾讯新闻前端团队
吐血整理的webpack入门知识及常用loader和plugin
在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的api改变输出结果。常见的有：打包优化，资源管理，注入环境变量。 **Webpack 是由nodejs编写的前端资源加载/打包工具，由nodejs提供了强大的文件处理，IO能力。Loader 和 Plugin 在 Webpack 里是支柱能力。 在整个构建流程中，Loader 和 Plugin 对编译结果起着决定性的作用，下面主要讲一下 Webpack 中一些常用的 Loader 和 Plugin。 ——「深入浅出 Webpack」常用Plugin1. copy-webpack-plugin将已经存在的单个文件或整个目录复制到构建目录。 // 建议 mini-css-extract-plugin 与 css-loader 一起使用// 将 loader 与 plugin 添加到 webpack 配置文件中const MiniCssExtractPlugin
2.5K62编辑于 2022-06-10 - 来自专栏菜鸟计划
webpack学习（三）html-webpack-plugin插件
一、html-webpack-plugin插件 简单创建 HTML 文件，用于服务器访问 例如：我们要为输出文件添加哈希值标记，避免老的不变的文件重新加载，避免新修改的文件受缓存影响。 在前后两次在终端输入webpack打包时，即使component中的所有文件都没有变化，资源是要重新加载一遍的。 dist/index.html中JS的src 因为我们生成的hash是不断变化的，与此同时index.html必须不断更改<script>标签中的src的值 解决hash值带来的问题，我们可以使用html-webpack-plugin 插件 修改我们的webpack.config.js: var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ，写入这个命令就好了：npm link webpack --save-dev 一张图解： ?
1.6K70发布于 2018-04-10 - 来自专栏一个会写诗的程序员的博客
Monaco Editor Webpack Loader Plugin
Monaco Editor Webpack Loader Plugin A plugin to simplify loading the Monaco Editor with webpack. Installing npm install monaco-editor-webpack-plugin Using webpack.config.js: const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { entry: '. custom public path for worker scripts, overrides the public path from which files generated by this plugin This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers
1.9K30编辑于 2022-05-13 - 来自专栏网络日志
webpack的clean-webpack-plugin插件报错
1、出错代码 const path = require('path') const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: '. 8k才会执行 limit: 919200 } } ] } ] } } 2、错误描述 [webpack-cli constructor 3、出错原因 导入插件语句有误，以及使用有误 4、解决 应改为如下导入语句： const { CleanWebpackPlugin } = require('clean-webpack-plugin ') // es modules import { CleanWebpackPlugin} from 'clean-webpack-plugin'; 而在使用时也是，如果都是默认清空
23310编辑于 2024-06-13 - 来自专栏Czy‘s Blog
初探webpack之编写plugin
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活，以适应各种应用场景，当然也大大增加了webpack的复杂性，在webpack运行的生命周期中会广播出许多事件，plugin $ yarn add -D html-webpack-plugin 之后在webpack.config.js中进行配置，简单配置一下相关的输入输出和压缩信息，另外如果要是想每次打包删除dist文件夹的话可以考虑使用 clean-webpack-plugin插件。 const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports module.exports = BasicPlugin; 在开发plugin时最常用的两个对象就是compiler和compilation，它们是plugin和webpack之间的桥梁，compiler
1.1K20发布于 2021-10-09 - 来自专栏菜鸟计划
webpack学习（四）extract-text-webpack-plugin插件
二、extract-text-webpack-plugin插件 从 bundle 中提取文本（CSS）到单独的文件 安装 npm install extract-text-webpack-plugin --save-dev 用法 var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = {
96860发布于 2018-04-10 - 来自专栏编程技术分享
实现一个 webpack loader 和 webpack plugin
plugin webpack 在整个编译周期中会触发很多不同的事件，plugin 可以监听这些事件，并且可以调用 webpack 的 API 对输出资源进行处理。 这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。 plugin 的实现 我们看一下官网的定义，webpack 插件由以下部分组成： 一个 JavaScript 命名函数。 在插件函数的 prototype 上定义一个 apply 方法。 loader 处理后触发这个事件 compiler.plugin('emit', function (compilation, callback) { // 功能完成后调用 webpack 先在 webpack 配置文件中引入插件，然后在 plugins 选项中配置： const Plugin = require('.
79320发布于 2020-09-28 - 来自专栏全栈程序员必看
webpack devtools_webpack loader和plugin的区别
顾名思义资源映射，它做的就是维护打包处理后的代码与源代码之间的映射关系，只有映射的精确性则取决于webpack的配置项devtool，其决定了项目打包时是否以及如何生成source map,而生成的source 具体配置项可选值可参考webpack文档这里不一一列举。 首先可以看一下webpack的源码，对应处理逻辑仅有20行：https://github.com/webpack/webpack/blob/226a77c9d46b33da5b78b1c76a10384c78132074 options.devtool.includes("module"); const noSources = options.devtool.includes("nosources"); const Plugin /SourceMapDevToolPlugin"); new Plugin({ filename: inline ?
67710编辑于 2022-11-08 - 来自专栏前端开发面试指南
webpack实战，手写loader和plugin
序言对于 webpack 来说， loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢，单单止步于配置可能还不够。 但是呢，如果有看过 webpack 源码的小伙伴们可能会知道， webpack 的一些底层原理都是依据 plugin 来进行编写的。所以，我们还是有必要来学习一下 plugin 的编写。 如下图所示：图片其中 plugins 文件夹下放置我们想要写的 plugin ，同时里面的 copyright-webpack-plugin.js 文件放置我们即将要写的 plugin 的代码逻辑。 具体代码如下：console.log('hello monday');（2）编写plugin现在，我们来编写 plugin 的内容， copyright-webpack-plugin.js 文件的代码具体如下 （3）引用plugin现在，我们在 webpack.config.js 中，来引入我们上面的 plugin 。
68110编辑于 2022-09-28 - 来自专栏生如夏花绚烂
webpack系列---插件（plugin）的使用
一句话 插件（plugin）是用于扩展webpack的功能。 当然我们也可以在webpack.config.js中进行配置 但是热更新需借助插件（plugin）webpack.HotModuleReplacementPlugin() const path = require 页面还是磁盘上的，如果我们想得到更好的编码体验，我们是不是也可以把html页面也放在内存中 这里又要借助插件（plgin） html-webpack-plugin 安装插件 cnpm i html-webpack-plugin -D webpack.config.js配置 //导入在内存生成hmtl页面插件 const htmlWebpackPlugin = require('html-webpack-plugin') .. } 在package.json添加浏览器列表 "browserslist": [ "> 1%", "last 5 versions", "not ie <= 8" ] 常用参数
77110编辑于 2022-09-08 - 来自专栏京程一灯
重学webpack4之plugin开发
├── plugins │ └── my-plugin.js ├── src │ └── index.js └── webpack.config.js package.json { " 4.43.0", "webpack-cli": "^3.3.12" } } webpack.config.js const path = require('path'); const MyPlugin npm run build，日志打印 my plugin is executed my plugin options: xfz zip-plugin ├── dist │ ├── main.js webpack.config.js package.json { "name": "zip-plugin", "version": "1.0.0", "description": "", webpack.config.js const path = require('path'); const ZipPlugin = require('.
72220发布于 2020-11-26 - 来自专栏杰的记事本
Webpack编写自己的Loader和Plugin
Webpack通过Plugin机制让其更加灵活，以适应各种应用场景。 Compiler和Compilation 在开发Plugin时最常用的两个对象就是Compiler和Compilation，它们是Plugin和Webpack之间的桥梁。 // 如果不执行 callback，运行流程将会一直卡在这不往下执行 callback(); }); 常用API 插件可以用来修改输出文件、增加输出文件、甚至可以提升Webpack性能、等等 由于Webpack提供的API非常多，有很多API很少用的上，又加上篇幅有限，下面来介绍一些常用的API。 Webpack在运行过程中广播出常用事件，你可以从中找到你需要的事件。
89220发布于 2019-09-04 - 来自专栏前端全栈开发者
详解Webpack的loader和plugin编写
1.2 Plugin plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。 当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。 1.3 plugin和loader的区别是什么？ /plugins/copyright-webpack-plugin') module.exports = { mode: 'development', entry: '.
2.3K10发布于 2019-12-24 - 来自专栏前端开发面试指南
Webpack中的plugin插件机制
plugin 是用来扩展 webpack 功能的，通过在构建流程里注入钩子实现，它为 webpack 带来了很大的灵活性。plugin 相对于 loader 有哪些区别？ 在 webpack 构建流程中的特定时机会广播对应的事件，插件可以监听这些事件的发生，在特定的时机做对应的事情。包括：打包优化，资源管理，注入环境变量。plugin 该怎么配置呢？ 下面整理的插件列表来自 webpack 中文官网，大家看见不熟悉的 plugin 可以点击名称跳转，看一看，了解一下具体玩法。 参考webpack视频讲解：进入学习热身写一个最基础的 plugin：// 一个 JavaScript 命名函数。 退出，就会直接跳转到本步骤，插件可以在本事件中获取具体错误原因系列文章「webpack 核心特性」loader「webpack 核心特性」插件(plugin)「webpack 核心特性」模块热替换(HMR
1.1K20编辑于 2022-10-21 - 来自专栏web share
webpack的loader和plugin的区别
loader最后执行 第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码 二、什么是plugin 在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出果。 三、loader和plugin的区别 1. loader，是一个转换器 将A文件进行编译形成B文件，这里操作的是文件，比如将 A.scss 转换为 A.css，是单纯的文件转换过程。 2. plugin 是插件扩展器 针对webpack打包的过程，它不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些事件钩子，执行任务。 plugin 比loader 强大，通过plugin 可以访问 compliler和compilation过程，通过钩子拦截 webpack 的执行。
2.9K00发布于 2021-01-13 - 来自专栏采云轩
手把手带你入门Webpack Plugin
这是第 101 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队 关注我们吧～ 本文首发于政采云前端团队博客：手把手带你入门Webpack Plugin https://www.zoo.team /article/webpack-plugin 关于 Webpack 在讲 Plugin 之前，我们先来了解下 Webpack。 了解完 Webpack 的基本概念之后，我们再来看下，为什么我们会需要 Plugin。 Webpack && Tapable Webpack 运行机制 要理解 Plugin，我们先大致了解 Webpack 打包的流程 我们打包的时候，会先合并 Webpack config 文件和命令行参数 fileGuid=3tGHdrykRgwCyTP8 本文列举一些常用 Hooks 和其对应的类型 Compiler Hooks Hook type 调用 run AsyncSeriesHook 开始读取
86410发布于 2021-06-15 - 来自专栏李维亮的博客
webpack打包开启Gzip时compression-webpack-plugin 2.0.0报错
最近做webpack基于vue-cli的打包优化，调试到productionGzip文件压缩优化，在项目 根目录config/index.js 中 build 对象内找到 productionGzip compiler.hooks.emit.tapAsync({ name: 'CompressionPlugin' }, emit); 排查了下原因，然后我去看了下：https://www.npmjs.com/package/compression-webpack-plugin 翻译过来的意思就是此模块最低要求 Node v6.9.0和Webpack v4.0.0 这是由于我安装的compression-webpack-plugin是最新2.0.0的，所以把当前的包给卸载了 npm uninstall --save-dev compression-webpack-plugin 然后安装了1.1.12版本的，安装命令（指定版本在包后面加个@版本号就ok） npm install - -save-dev compression-webpack-plugin@1.1.12 安装好后执行了下打包命令，发现项目可以正常跑起来了 npm run build
1.3K30发布于 2021-07-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号